<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="心愿">
        <el-input v-model="form.wish"></el-input>
      </el-form-item>

      <el-form-item label="头像" class="avatar">
        <el-radio-group v-model="form.img">
          <el-radio label="img/1.jpg">
            <img src="img/1.jpg" alt="" />
          </el-radio>
          <el-radio label="img/2.jpg">
            <img src="img/2.jpg" alt="" />
          </el-radio>
          <el-radio label="img/3.jpg">
            <img src="img/3.jpg" alt="" />
          </el-radio>
          <el-radio label="img/4.jpg">
            <img src="img/4.jpg" alt="" />
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        wish: "",
        img: "",
      },
    };
  },
  methods: {
    add() {
      this.$store.commit("add", this.form);
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.avatar {
  img {
    width: 50px;
    height: 50px;
  }
}
</style>
